<template>
	<view class="big-box">
		<swiper class="swiper" :current.sync="current" indicator-dots @tap="swiperTap" circular autoplay
			:interval="interval" indicator-color="#fff" indicator-active-color="black">
			<swiper-item v-for=" (item,index) in swipers" :key="index" class="swiper-item">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: ["swipers"],
		/*说明一下：swipers轮播图数据是外部传入，轮播图的张数取决于数组的长度，大概格式如下：
		swipers:[
			{
				image_src: require('./../../static/images/logo.png')
			},
			{
				image_src: require('./../../static/images/logo.png')
			},
			{
				image_src: require('./../../static/images/logo.png')
			}
		]
		**/
		data() {
			return {
				current: 0,
				interval: 3000
			};
		},
		methods: {
			swiperTap(event) {
				const {
					target: {
						dataset: {
							index
						}
					}
				} = event;
				this.current = parseInt(index);
				// console.log(event, 'event')
				// console.log(this.current, 'current')
			}

		}
	}
</script>

<style lang="scss">
	.big-box {
		width: 750rpx;
		overflow: hidden;
		height: 280rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		box-sizing: border-box;

		.swiper {
			width: 100%;
			overflow: hidden;
			height: 100%;
			border-radius: 20rpx;

			.swiper-item {
				width: 100%;
				overflow: hidden;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>